<template>
  <!-- 工序责任设置表单弹窗 -->
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      :width="!props.isReadonly ? '1300px' : '1200px'"
      draggable
      align-center
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :inline="true"
        :rules="rules"
        label-width="100"
        v-show="!props.isReadonly"
      >
        <div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="工段" prop="workshopSectionId">
                <el-select
                  v-model="formData.workshopSectionId"
                  v-if="!props.isReadonly"
                  placeholder="请选择工段"
                  clearable
                  filterable
                  :disabled="!!props.data.id"
                  @change="changeWorkshopSection"
                >
                  <el-option
                    v-for="item in workshopSectionList"
                    :key="item.id"
                    :label="`${item.workshopSectionCode}`"
                    :value="item.id"
                  />
                </el-select>
                <span v-else>{{ formData.processId }}</span>
              </el-form-item>
              <!--            <el-form-item label="责任工序" prop="processId">-->
              <!--              <el-select-->
              <!--                v-model="formData.processId"-->
              <!--                v-if="!props.isReadonly"-->
              <!--                placeholder="请选择责任工序"-->
              <!--                clearable-->
              <!--                filterable-->
              <!--                @change="changeProcess"-->
              <!--              >-->
              <!--                <el-option-->
              <!--                  v-for="item in processList"-->
              <!--                  :key="item.id"-->
              <!--                  :label="`${item.processCode}`"-->
              <!--                  :value="item.id"-->
              <!--                />-->
              <!--              </el-select>-->
              <!--              <span v-else>{{ formData.processId }}</span>-->
              <!--            </el-form-item>-->
            </el-col>
            <el-col :span="10">
              <el-form-item label="最终审批人">
                <el-select
                  ref="selectRef"
                  v-model="personSelectOptions"
                  multiple
                  placeholder="请选择人员"
                  :collapse-tags="true"
                  :collapse-tags-tooltip="true"
                  :max-collapse-tags="2"
                  style="width: 400px"
                  @visible-change="openSelectOriganization"
                  @remove-tag="removeSelection"
                >
                  <el-option
                    v-for="item in personOptions"
                    :key="item.userId"
                    :label="`${item.userName}${
                      item.empNo ? '(' + item.empNo + ')' : ''
                    }`"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="是否给最终审批人发送邮件"
                label-width="185px"
              >
                <el-switch
                  v-model="formData.isSendMail"
                  inline-prompt
                  v-if="!props.isReadonly"
                  active-value="1"
                  inactive-value="0"
                  active-text="是"
                  inactive-text="否"
                />

                <span v-else>
                  {{ formData.isSendMail == "1" ? "是" : "否" }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- <el-divider content-position="left" style="margin: 0 0 10px" /> -->
        <div class="flex send-select">
          <div class="flex-1">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              v-if="!props.isReadonly"
            >
              <h4 class="mb-[15px] mt-[15px] c-[#333]! text-[15px]! pl-0!">
                邮件接收人
                <el-tooltip
                  :hide-after="0"
                  effect="light"
                  content="角色选择"
                  placement="right"
                >
                  <InfoFilled style="width: 15px; height: 15px; color: #999" />
                </el-tooltip>
              </h4>
              <el-button
                type="primary"
                plain
                @click="handleAddPerson"
                v-if="!props.isReadonly"
              >
                <i-ep-plus />
                新增
              </el-button>
            </div>

            <div class="formTable">
              <el-table
                :data="tablePerson"
                style="width: 100%"
                :key="Math.random"
                max-height="400px"
                border
                v-if="!props.isReadonly"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="60"
                />
                <el-table-column
                  label="邮件接收人"
                  props="roleName"
                  min-width="100"
                  align="center"
                >
                  <template #default="{ row }">
                    <span>{{ row.roleName }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  fixed="right"
                  align="center"
                  label="操作"
                  width="55"
                  v-if="!props.isReadonly"
                >
                  <template #default="scope">
                    <el-button
                      type="danger"
                      link
                      @click.stop="handleDeletePerson(scope.$index)"
                      ><i-ep-delete />
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="flex-1 ml-[20px]">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              v-if="!props.isReadonly"
            >
              <h4 class="mb-[15px] mt-[15px] c-[#333]! text-[15px]! pl-0!">
                工单查看人
              </h4>
              <el-button
                type="primary"
                plain
                @click="openSelectOriganization1"
                v-if="!props.isReadonly"
              >
                <i-ep-plus />
                新增
              </el-button>
            </div>
            <div class="formTable">
              <el-table
                :data="personOptions1"
                style="width: 100%"
                :key="Math.random"
                max-height="400px"
                border
              >
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="60"
                />
                <el-table-column
                  label="工单查看人"
                  props="userName"
                  min-width="100"
                  align="center"
                >
                  <template #default="{ row }">
                    <span
                      >{{ row.userName
                      }}{{ row.empNo ? `(${row.empNo})` : "" }}</span
                    >
                  </template>
                </el-table-column>

                <el-table-column
                  fixed="right"
                  align="center"
                  label="操作"
                  width="50"
                  v-if="!props.isReadonly"
                >
                  <template #default="scope">
                    <el-button
                      type="danger"
                      link
                      @click.stop="removeSelection1(scope.row.userId)"
                      ><i-ep-delete />
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="flex-1 ml-[20px]">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              v-if="!props.isReadonly"
            >
              <h4 class="mb-[15px] mt-[15px] c-[#333]! text-[15px]! pl-0!">
                责任人
              </h4>
              <el-button
                type="primary"
                plain
                @click="openSelectOriganization2"
                v-if="!props.isReadonly"
              >
                <i-ep-plus />
                新增
              </el-button>
            </div>
            <div class="formTable">
              <el-table
                :data="personOptions2"
                style="width: 100%"
                :key="Math.random"
                max-height="400px"
                border
              >
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="60"
                />
                <el-table-column
                  label="责任人"
                  props="userName"
                  min-width="100"
                  align="center"
                >
                  <template #default="{ row }">
                    <span
                      >{{ row.userName
                      }}{{ row.empNo ? `(${row.empNo})` : "" }}</span
                    >
                  </template>
                </el-table-column>

                <el-table-column
                  fixed="right"
                  align="center"
                  label="操作"
                  width="50"
                  v-if="!props.isReadonly"
                >
                  <template #default="scope">
                    <el-button
                      type="danger"
                      link
                      @click.stop="removeSelection2(scope.row.userId)"
                      ><i-ep-delete />
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="flex-1 ml-[20px]">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              v-if="!props.isReadonly"
            >
              <h4 class="mb-[15px] mt-[15px] c-[#333]! text-[15px]! pl-0!">
                审批人
              </h4>
              <el-button
                type="primary"
                plain
                @click="openSelectOriganization3"
                v-if="!props.isReadonly"
              >
                <i-ep-plus />
                新增
              </el-button>
            </div>
            <div class="formTable">
              <el-table
                :data="personOptions3"
                style="width: 100%"
                :key="Math.random"
                max-height="400px"
                border
              >
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="60"
                />
                <el-table-column
                  label="审批人"
                  props="userName"
                  min-width="100"
                  align="center"
                >
                  <template #default="{ row }">
                    <span
                      >{{ row.userName
                      }}{{ row.empNo ? `(${row.empNo})` : "" }}</span
                    >
                  </template>
                </el-table-column>

                <el-table-column
                  fixed="right"
                  align="center"
                  label="操作"
                  width="50"
                  v-if="!props.isReadonly"
                >
                  <template #default="scope">
                    <el-button
                      type="danger"
                      link
                      @click.stop="removeSelection3(scope.row.userId)"
                      ><i-ep-delete />
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定</el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
      <el-descriptions
        class="margin-top"
        title=""
        :column="3"
        size="large"
        border
        v-show="props.isReadonly"
      >
        <!--        <el-descriptions-item :span="1">-->
        <!--          <template #label>-->
        <!--            <div class="cell-item">工序</div>-->
        <!--          </template>-->

        <!--          <div style="width: 100%; word-break: break-all">-->
        <!--            {{ formData.processCode }}-->
        <!--          </div>-->
        <!--        </el-descriptions-item>-->
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">工段</div>
          </template>

          <div style="width: 100%; word-break: break-all">
            {{ formData.workshopSectionCode }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">最终审批人</div>
          </template>

          <div style="width: 100%">
            {{ formData.approverRoleList || "" }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">是否给最终审批人发送邮件</div>
          </template>

          <div style="width: 100%">
            {{ formData.isSendMail == "1" ? "是" : "否" }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template #label>
            <div class="cell-item">邮件接收人</div>
          </template>

          <div style="width: 100%">
            {{ formData.noticeRoleList }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template #label>
            <div class="cell-item">工单查看人</div>
          </template>

          <div style="width: 100%">
            {{ formData.viewRoleList }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template #label>
            <div class="cell-item">责任人</div>
          </template>

          <div style="width: 100%">
            {{ formData.responsibleRoleList }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template #label>
            <div class="cell-item">审批人</div>
          </template>

          <div style="width: 100%">
            {{ formData.leaderRoleList }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- 设备选择 -->
    <psmprocessduty-select
      :visible="selectDialogLeader.visible"
      :data="breakListLeader"
      :title="selectDialogLeader.title"
      @change-visible-leader="changeVisibleLeader"
    />
    <psmprocessduty-select
      :visible="selectDialogPerson.visible"
      :data="breakListPerson"
      :title="selectDialogPerson.title"
      @change-visible-person="changeVisiblePerson"
    />
    <!-- 最终审核人员 弹窗组件 -->
    <SelectPersonDialog
      v-model:visible="personSelect.visible"
      :data="personSelect.data"
      @echo-info="getPersonSelect"
      :isMultiple="true"
      key="1"
    />
    <!-- 工单查看 弹窗组件 -->
    <SelectPersonDialog
      v-model:visible="personSelect1.visible"
      :data="personSelect1.data"
      @echo-info="getPersonSelect1"
      :isMultiple="true"
      key="2"
    />
    <!-- 责任人 弹窗组件 -->
    <SelectPersonDialog
      v-model:visible="personSelect2.visible"
      :data="personSelect2.data"
      @echo-info="getPersonSelect2"
      :isMultiple="true"
      key="3"
    />
    <!-- 审核人 弹窗组件 -->
    <SelectPersonDialog
      v-model:visible="personSelect3.visible"
      :data="personSelect3.data"
      @echo-info="getPersonSelect3"
      :isMultiple="true"
      key="4"
    />
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import { InfoFilled } from "@element-plus/icons-vue";

const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "PsmCommonDutySetting",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  type: {
    type: String,
    default: () => {
      return "psm";
    },
  },
});

/** 打开最终审核人员选择器方法   start **/
interface SelectOption {
  id?: string;
  userId?: string;
}
const personSelectOptions: any = ref([]); // 选择器 list
const personOptions: any = ref([]); // 选择器 model ids
const selectRef = ref(); // 选择器 ref
// 定义 人员选择器弹窗参数
const personSelect = reactive({
  visible: false,
  data: [],
});
// 移除 人员tag标签
function removeSelection(id: SelectOption) {
  // ElMessageBox.confirm("确认删除当前数据项?", "提示", {
  //   confirmButtonText: "确定",
  //   cancelButtonText: "取消",
  //   type: "warning",
  // }).then(async () => {
  personOptions.value.forEach((row: SelectOption, index: number) => {
    if (row.userId === id) personOptions.value.splice(index, 1);
  });
  // });
}
// 打开 人员选择器弹窗
function openSelectOriganization(event: boolean) {
  if (event) {
    selectRef.value.blur(); // 隐藏下拉框
    personSelect.visible = true;
    const newOptions: any = [];
    personOptions.value.map((e: any) =>
      newOptions.push({
        id: e?.userId,
        firstName: e?.userName,
        empNo: e?.empNo,
      })
    );
    personSelect.data = newOptions;
  }
}
// 接收 人员选择器回调参数
function getPersonSelect(options: any) {
  const newOptions: any = [];
  options.map((e: LeaderTS) =>
    newOptions.push({
      userId: e?.id,
      userName: e?.firstName,
      empNo: e?.empNo,
      userType: 5,
    })
  );
  personOptions.value = newOptions;
  const ids: any = [];
  options?.map((item: SelectOption) => ids.push(item.id));
  personSelectOptions.value = ids || [];
}

/** 打开人员选择器方法   end **/

/** 弹窗显示 **/
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);

/** formData定义表单数据 */
const formRef = ref(ElForm);
let formData = reactive<any>({
  id: "",
  version: "",
  processId: "",
  workshopSectionId: "",
  processName: "",
  processCode: "",
  workshopSectionName: "",
  workshopSectionCode: "",
  businessType: "",
  responsibleRoleList: "",
  leaderRoleList: "",
  enabled: "",
  deleted: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  noticeRoleList: "",
  viewRoleList: "",
  approverRoleList: "",
  userDetails: [],
  isSendMail: "1",
  details: [],
});

/** rules规则 */
const rules = reactive({
  processId: [{ required: true, message: "请选择责任工序", trigger: "change" }],
  responsibleRoleList: [],
  leaderRoleList: [],
});

const isValidated = ref(false);
/** 删除行 */
const handleDeleteLeader = (index: any) => {
  tableLeader.value.splice(index, 1);
  isValidated.value && formRef.value.validate(() => {});
};
const handleDeletePerson = (index: any) => {
  ElMessageBox.confirm("确认删除当前数据项?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    tablePerson.value.splice(index, 1);
    isValidated.value && formRef.value.validate(() => {});
  });
};

const details1 = {
  id: "",
  version: "",
  dutyId: "",
  roleType: "",
  roleId: "",
  roleName: "",
  enabled: "",
  deleted: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
};
const tablePerson = ref<any>([]);
const tableLeader = ref<any>([]);
/** 添加行 */
const handleAddLeader = () => {
  selectDialogLeader.value.title = "选择领导人";
  selectDialogLeader.value.visible = true;

  if (tableLeader.value.length > 0) {
    getBreakListLeader();
  }
};
const handleAddPerson = () => {
  selectDialogPerson.value.title = "选择责任人";

  selectDialogPerson.value.visible = true;
  if (tablePerson.value.length > 0) {
    getBreakListPerson();
  } else {
    breakListPerson.value = [];
  }
};

const selectDialogLeader = ref({
  visible: false,
  title: "",
});

interface LeaderTS {
  id?: string;
  roleId?: string;
  roleName?: string;
  roleType?: number;
  userName?: string;
  userId?: string;
  firstName?: string;
  empNo?: string;
}
const changeVisibleLeader = (val: boolean, data: any) => {
  if (data) {
    tableLeader.value = [];
    data.forEach((item: LeaderTS) => {
      tableLeader.value.push({
        roleId: item.id,
        roleName: item.roleName,
        roleType: 2,
      });
    });
  }

  selectDialogLeader.value.visible = val;
};

// 新增完返回的数据用于显示选择器
const breakListLeader = ref<any>([]);
const getBreakListLeader = () => {
  breakListLeader.value = [];
  tableLeader.value.forEach((item: LeaderTS) => {
    if (item.roleType == 2) {
      breakListLeader.value.push({
        id: item.roleId,
        roleName: item.roleName,
      });
    }
  });
};

const selectDialogPerson = ref({
  visible: false,
  title: "",
});
const changeVisiblePerson = (val: boolean, data: any) => {
  if (data) {
    tablePerson.value = [];
    data.forEach((item: LeaderTS) => {
      tablePerson.value.push({
        roleId: item.id,
        roleName: item.roleName,
        roleType: 1,
      });
    });
  }
  selectDialogPerson.value.visible = val;
};

// 新增完返回的数据用于显示选择器
const breakListPerson = ref<any>([]);
const getBreakListPerson = () => {
  breakListPerson.value = [];
  tablePerson.value.forEach((item: LeaderTS) => {
    if (item.roleType == 1) {
      breakListPerson.value.push({
        id: item.roleId,
        roleName: item.roleName,
      });
    }
  });
  console.log(" breakListPerson.value", breakListPerson.value);
};

/** 编辑时赋值 */
watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      Object.assign(formData, props.data);
      if (formData.id) {
        getdetails();
        formData.isSendMail = String(formData.isSendMail);
        getUserDetails();
      }
    }
  }
);

const hh = () => {
  tableLeader.value = [];
  tablePerson.value = [];

  formData.details?.forEach((item: LeaderTS) => {
    if (item.roleType == 2) {
      tableLeader.value.push(item);
    } else {
      tablePerson.value.push(item);
    }
  });
};

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.details = [];
  formData.userDetails = [];
  formData.id = "";
  formData.version = "";
  formData.processId = "";
  formData.workshopSectionId = "";
  formData.businessType = "";
  formData.responsibleRoleList = "";
  formData.leaderRoleList = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.isSendMail = "1";
  tableLeader.value = [];
  tablePerson.value = [];
  personOptions.value = [];
  personSelectOptions.value = [];
  personOptions1.value = [];
  personSelectOptions1.value = [];
  personOptions2.value = [];
  personSelectOptions2.value = [];
  personOptions3.value = [];
  personSelectOptions3.value = [];
}

const loading = ref(false);

/** 工序责任设置保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      formData.details = [...tablePerson.value];
      formData.userDetails = [
        ...personOptions1.value,
        ...personOptions2.value,
        ...personOptions3.value,
        ...personOptions.value,
      ];

      await request({
        url: `/dmpDosPcm/${props.type}processduty/save`,
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
      isValidated.value = false;
    } else {
      isValidated.value = true;
    }
  });
}

async function getUserDetails() {
  // 清空对应值
  formData.userDetails = [];
  personOptions1.value = [];
  personSelectOptions1.value = [];
  personOptions2.value = [];
  personSelectOptions2.value = [];
  personOptions3.value = [];
  personSelectOptions3.value = [];
  let sondetails = await request({
    url: `/dmpDosPcm/${props.type}processduty/getUserDetails`,
    method: "post",
    data: formData,
  });

  const result = sondetails.data;
  //   const result = mock;
  formData.userDetails = result || [];

  // 更新对应object数组
  formData.userDetails?.map((item: any) => {
    if (item.userType == 2) {
      personOptions1.value.push(item);
      personSelectOptions1.value.push(item.userId);
    } else if (item.userType == 3) {
      personOptions2.value.push(item);
      personSelectOptions2.value.push(item.userId);
    } else if (item.userType == 4) {
      personOptions3.value.push(item);
      personSelectOptions3.value.push(item.userId);
    } else if (item.userType == 5) {
      personOptions.value.push(item);
      personSelectOptions.value.push(item.userId);
    }
  });
}

async function getdetails() {
  formData.details = [];
  let sondetails = await request({
    url: `/dmpDosPcm/${props.type}processduty/getDetails`,
    method: "post",
    data: formData,
  }).finally(() => {
    loading.value = false;
  });
  sondetails.data.forEach((element: any) => {
    formData.details.push(element);
  });
  hh();
}

// 获取工艺列表
const processList = ref<any>([]);
const getProcessList = async () => {
  await request({
    url: `/mdm/mdmprocess/getList`,
    method: "post",
    data: {},
  }).then((res) => {
    processList.value = res.data;
  });
};

// 改变工艺路线时
const changeProcess = (e: string) => {
  if (e) {
    processList.value.forEach((item: any) => {
      if (item.id == e) {
        formData.processName = item.processName;
        formData.processCode = item.processCode;
      }
    });
  } else {
    formData.processName = "";
    formData.processCode = "";
  }
};

const workshopSectionList = ref([]);
const getWorkshopSectionList = async () => {
  const { data } = await request({
    url: `/mdm/mdmworkshopsection/getList`,
    method: "post",
    data: {},
  });
  workshopSectionList.value = data || [];
};

// 改变工艺路线时
const changeWorkshopSection = (e: string) => {
  if (e) {
    processList.value.forEach((item: any) => {
      if (item.id == e) {
        formData.workshopSectionName = item.workshopSectionName;
        formData.workshopSectionCode = item.workshopSectionCode;
      }
    });
  } else {
    formData.workshopSectionName = "";
    formData.workshopSectionCode = "";
  }
};
/** 打开工单查看人员选择器方法   start **/
const personSelectOptions1: any = ref([]); // 选择器 list
const personOptions1: any = ref([]); // 选择器 model ids
// 定义 人员选择器弹窗参数
const personSelect1 = reactive({
  visible: false,
  data: [],
});
// 移除 人员tag标签
function removeSelection1(userId: SelectOption) {
  ElMessageBox.confirm("确认删除当前数据项?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    personOptions1.value.forEach((row: SelectOption, index: number) => {
      if (row.userId === userId) personOptions1.value.splice(index, 1);
    });
  });
}
// 打开 人员选择器弹窗
function openSelectOriganization1() {
  personSelect1.visible = true;
  const newOptions: any = [];
  personOptions1.value.map((e: LeaderTS) =>
    newOptions.push({
      id: e?.userId,
      firstName: e?.userName,
      empNo: e?.empNo,
    })
  );
  personSelect1.data = newOptions;
}
// 接收 人员选择器回调参数
function getPersonSelect1(options: any) {
  const newOptions: any = [];
  options.map((e: LeaderTS) =>
    newOptions.push({
      userId: e?.id,
      userName: e?.firstName,
      empNo: e?.empNo,
      userType: 2,
    })
  );
  personOptions1.value = newOptions;
  const ids: any = [];
  options?.map((item: SelectOption) => ids.push(item.id));
  personSelectOptions1.value = ids || [];
}

/** 打开人员选择器方法   end **/

/** 打开责任人员选择器方法   start **/
const personSelectOptions2: any = ref([]); // 选择器 list
const personOptions2: any = ref([]); // 选择器 model ids
// 定义 人员选择器弹窗参数
const personSelect2 = reactive({
  visible: false,
  data: [],
});
// 移除 人员tag标签
function removeSelection2(userId: SelectOption) {
  ElMessageBox.confirm("确认删除当前数据项?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    personOptions2.value.forEach((row: SelectOption, index: number) => {
      if (row.userId === userId) personOptions2.value.splice(index, 1);
    });
  });
}
// 打开 人员选择器弹窗
function openSelectOriganization2() {
  personSelect2.visible = true;
  const newOptions: any = [];
  personOptions2.value.map((e: LeaderTS) =>
    newOptions.push({
      id: e?.userId,
      firstName: e?.userName,
      empNo: e?.empNo,
    })
  );
  personSelect2.data = newOptions;
}
// 接收 人员选择器回调参数
function getPersonSelect2(options: any) {
  const newOptions: any = [];
  options.map((e: LeaderTS) =>
    newOptions.push({
      userId: e?.id,
      userName: e?.firstName,
      empNo: e?.empNo,
      userType: 3,
    })
  );
  personOptions2.value = newOptions;
  const ids: any = [];
  options?.map((item: SelectOption) => ids.push(item.id));
  personSelectOptions2.value = ids || [];
}

/** 打开人员选择器方法   end **/

/** 打开审核人选择器方法   start **/
const personSelectOptions3: any = ref([]); // 选择器 list
const personOptions3: any = ref([]); // 选择器 model ids
// 定义 人员选择器弹窗参数
const personSelect3 = reactive({
  visible: false,
  data: [],
});
// 移除 人员tag标签
function removeSelection3(userId: SelectOption) {
  ElMessageBox.confirm("确认删除当前数据项?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    personOptions3.value.forEach((row: SelectOption, index: number) => {
      if (row.userId === userId) personOptions3.value.splice(index, 1);
    });
  });
}
// 打开 人员选择器弹窗
function openSelectOriganization3() {
  personSelect3.visible = true;
  const newOptions: any = [];
  personOptions3.value.map((e: LeaderTS) =>
    newOptions.push({
      id: e?.userId,
      firstName: e?.userName,
      empNo: e?.empNo,
    })
  );
  personSelect3.data = newOptions;
}
// 接收 人员选择器回调参数
function getPersonSelect3(options: any) {
  const newOptions: any = [];
  options.map((e: LeaderTS) =>
    newOptions.push({
      userId: e?.id,
      userName: e?.firstName,
      empNo: e?.empNo,
      userType: 4,
    })
  );
  personOptions3.value = newOptions;
  const ids: any = [];
  options?.map((item: SelectOption) => ids.push(item.id));
  personSelectOptions3.value = ids || [];
}

/** 打开人员选择器方法   end **/

onMounted(() => {
  getProcessList();
  getWorkshopSectionList();
});
</script>

<style lang="scss" scoped>
h4 {
  font-weight: 400;
  color: #000;
  padding-left: 10px;
  font-size: 14px;
  line-height: 14px;
}
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 140px;
}
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  min-width: 180px;
}
:deep(.el-table--default .cell) {
  padding: 0 6px;
}
:deep(.formTable .el-button svg) {
  margin-right: 0px;
}
:deep(.send-select .el-button--primary) {
  padding: 4px 10px !important;
  height: 28px !important;
  font-size: 14px !important;
}
:deep(.el-dialog__body) {
  min-height: 400px;
}
</style>
